<template>
  <div class="dashboard-container">
    <div class="app-container">

    <!-- 顶部工具栏 -->
    <PageTools>
      <!-- 左侧 默认插槽内容-->
      <span>本月: 社保在缴 公积金在缴</span>
      <!-- 右侧具名插槽内容 -->
      <template #right>
        <el-button type="primary" size="small" @click="handleExport">导出</el-button>
        <el-button type="primary" size="small" @click="$router.push('/import')">导入</el-button>
        <el-button icon="plus" type="primary" size="small" @click="showDialog = true">新增员工</el-button>
      </template>
    </PageTools>

    <!--插槽烤串命名 点击新增员显示弹窗  -->
    <add-employee :show-dialog.sync="showDialog" />

    <!--员工列表 -->
    <el-card style="margin-top: 10px;">
      <el-table border :data="list">
        <el-table-column label="序号" type="index" sortable="" />
        <el-table-column label="姓名" prop="username" sortable="" />
        <!-- 添加员工头像 -->
          <el-table-column label="头像"  sortable="">
            <template v-slot="{row}">
              <!-- 如果赋值给src的值是null，那么不会触发请求，那么也不会触发onerror事件 -->
              <img v-imgerror @click="showCodeBox(row.staffPhoto)" :src="row.staffPhoto" style="width: 50px;height:50px;border-radius: 25px;" alt="">
            </template>
          </el-table-column>
        <el-table-column label="工号" prop="workNumber" sortable="" />
        <!-- 格式化--formatter方法2  formatter可以对该列的数据进行处理形成新的数据 -->
        <el-table-column label="聘用形式" :formatter="formatType" prop="formOfEmployment" sortable="" />
        <!-- 格式化---方法1 -->
        <!-- <el-table-column label="聘用形式" prop="formOfEmployment" sortable="">
            <template v-slot="{row}">
              <div>{{ row.formOfEmployment | formatType }}</div>
              <div>{{ formatType(row.formOfEmployment) }}</div>
            </template>
          </el-table-column> -->
          <!-- 格式化--过滤器方法3 函数 记得看下-->

        <el-table-column label="部门" prop="departmentName" sortable="" />
        <el-table-column label="入职时间" prop="timeOfEntry" sortable="" >
          <!-- 过滤 初始化时间 -->
          <template v-slot="{row}"> 
            {{row.timeOfEntry | formatTime}}
          </template>
        </el-table-column>
        <el-table-column label="账户状态" prop="enableState" sortable="">
            <template v-slot="{row}">
              <el-switch
                :value="row.enableState"
                :active-value="1"
                :inactive-value="0"
                active-color="green"
                inactive-color="lightgray">
              </el-switch>
            </template>
        </el-table-column>
        <el-table-column label="操作" sortable="" fixed="right" width="280">
          <template v-slot="{row}">
            <el-button type="text" size="small" @click="$router.push('/employees/detail/' + row.id)">查看</el-button>
            <el-button type="text" size="small">转正</el-button>
            <el-button type="text" size="small">调岗</el-button>
            <el-button type="text" size="small">离职</el-button>
            <el-button type="text" size="small" @click="handleRole(row.id)">角色</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
      </el-table-column>
    </el-table>
  <!-- 分页组件 -->
  <div style="height: 60px; margin-top: 10px">
    <el-pagination :current-page="queryData.page" :page-size="queryData.size" :total="total" layout="prev, pager, next" @current-change="changePage" />
  </div>
</el-card>
</div>
<!-- 二维码弹窗 -->
    <el-dialog title="二维码" :visible="showCodeDialog" @close="showCodeDialog = false">
      <el-row type="flex" justify="center">
        <!-- 绘制二维码的画布 -->
        <canvas ref="myCanvas" />
      </el-row>
    </el-dialog>
    <!-- 分配角色弹窗 -->
    <AssignRole :user-id="userId" :show-role-dialog.sync="showRoleDialog" />
</div>
</template>

<script>
import { reqGetEmployeeList } from '@/api/employees'
import Types from '@/api/constant/employees.js' //不能直接默认导入 approvalType
import moment from 'moment'
import QrCode from 'qrcode'
import AssignRole from './components/assign-role.vue'
import AddEmployee from './components/AddEmployee.vue'

export default {
  name: 'Employees',
  components: {
    AssignRole,
    AddEmployee,
    // AddEmployee
  },
  // 局部过滤器
  filters: {
    // 过滤器名称
    formatType (value) {
      // 形参表示被过滤器处理的原始数据 过滤 value值要么是默认值1 否则是空
      const info = Types.hireType.find(item => item.id === value)
      return info ? info.value : ''
    }
  },
  data () {
    return {
      // 当前分配角色的用户id
      userId: '',
      // 控制分配角色弹窗
      showRoleDialog: false,
      // 请求参数
      queryData: {
        page: 1,
        size: 10
      },
    // 员工列表数据
      list: [],
      // 列表总数
      total: 0,
       // 二维码弹窗标志位
      showCodeDialog: false,
      //控制新增员工弹窗的显示和隐藏 
      showDialog:false,
    }
  },
  //触发
  created () {
    this.loadEmployeeList()
  },
  methods: {
     // 给用户分配角色
    handleRole (id) {
      this.userId = id
      this.showRoleDialog = true
    },
    // 显示二维码弹窗
    showCodeBox (url) {
      if (!url) return
      // 数据变成true之后，此时弹窗是否已经显示了？没有
      // 必须保证弹窗打开后，才去获取DOM元素
      this.showCodeDialog = true
      this.$nextTick(() => {
        // 保证前面的数据更新的页面完成渲染后触发回调
        // 生成当前头像的url地址的二维码，渲染到弹窗里面
        const dom = this.$refs.myCanvas
        QrCode.toCanvas(dom, url)
      })
    },
    //获取要导出的数据格式：二维数组
    getExportData (headers, rawData) {
      const result = []
      rawData.forEach(item => {
        // 产生一行数据
        const row = []
        for (const key in headers) {
          // 获取英文的key
          const enKey = headers[key]
          // 根据英文的key获取对应的值
          let attrValue = item[enKey]
          console.log(attrValue)
          if (['timeOfEntry', 'correctionTime'].includes(enKey)) {
            try {
              attrValue = moment(item[enKey]).format('yyyy-MM-DD')
            } catch {
              attrValue = '无效日期'
            }
          } else if (enKey === 'formOfEmployment') {
            // 聘用形式，转换为汉字
            const info = Types.hireType.find(item => item.id === attrValue)
            attrValue = info ? info.value : ''
          }
          // 放入一个列的值
          row.push(attrValue)
        }
        result.push(row)
      })
      return result
    },
    // 导出Excel
    async handleExport () {
      // 导出的数据列表表头
      const headers = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      // 获取需要导出的原始数据
      const rawData = await reqGetEmployeeList({
        page: 1,
        size: 50
      })
      // 把原始数据处理成导出的数据格式
      const list = this.getExportData(headers, rawData.data.rows)
      // 导出的表格数据的表头
      // const title = ['姓名', '手机号', '入职日期]
      // Object.keys 是ES6提供的函数用于获取对象的所有的key，最终形成数组
      const title = Object.keys(headers)
      // 依赖包需要用到的时候才去加载这个js文件
      import('@/vendor/Export2Excel').then(excel => {
        excel.export_json_to_excel({
          header: title,    // 表头 必填 字符串类型 
          data: list,       // 具体数据 必填 数组包数组 二位数组
          filename: 'excel-list', // 非必填 导出的文件名
          autoWidth: true, // 非必填  //默认表格格式
          bookType: 'xlsx' // 非必填  文件后缀名
        })
      })
    },
    // 基于方法实现聘用形式的格式化
    formatType (row) {
      // row表示整行的数据
      const info = Types.hireType.find(item => item.id === row.formOfEmployment)
      return info ? info.value : ''
    },
    // formatType (value) {
    //   const info = Types.hireType.find(item => item.id === value)
    //   return info ? info.value : ''
    // },
    // 控制页码切换
    changePage (page) {
      this.queryData.page = page
      this.loadEmployeeList()
    },
    // 获取员工列表数据
    async loadEmployeeList () {
      try {
        const ret = await reqGetEmployeeList(this.queryData)
        if (ret.code===10000) {
          this.list = ret.data.rows
          this.total = ret.data.total
        }
      } catch {
        this.$message.error('获取员工列表失败')
      }
    },
    closeDialog() {
      this.$emit('update:showDialog', false)
    },
  },

} 
</script>

<style lang="scss" scoped>
</style>